<template>
  <div>
    <template v-if="queryParams.isFilter">
      <div v-if="!filterShow" class="flex justify-end mb-5">
        <a-button type="primary" @click="handleFilter">
          查看所有符合筛选条件下车辆的{{ queryParams.feeCategory == 10 ? '报销单' : '付款单' }}
        </a-button>
      </div>
      <list-searcher v-if="filterShow" :searchList="searchList" v-model:searchForm="queryParams" @loadData="handleSubmit" />
    </template>

    <a-alert class="mb-5 items-start">
      <template #icon>
        <icon-exclamation-circle />
      </template>
      <div>
        1、统计车辆在{{ queryParams.feeCategory == 10 ? '报销' : '付款' }}单中生成的{{
          queryParams.feeCategory == 10 ? '报销' : '付款'
        }}总额
      </div>
      <div>2、数据取自{{ queryParams.feeCategory == 10 ? '报销' : '付款' }}单下费用明细中的关联车辆、费用产生门店、费用发生时间</div>
    </a-alert>

    <table-index :table="table" @loadData="loadData">
      <template #table-summary v-if="queryParams.isFilter">
        <div class="flex justify-end w-full">
          <a-button type="primary" @click="handleExport">导出</a-button>
        </div>
      </template>
      <template #businessCode="{ record }">
        <template v-if="record.businessCode">
          <a-link @click="() => onBusinessCodeLink(record)">{{ record.businessCode }}</a-link>
        </template>
        <template v-else> - </template>
        <tag type="primary" v-if="record.payStatusName">{{ record.payStatusName }}</tag>
      </template>
      <template #orderInfo="{ record }">
        <div v-if="record.workCode">
          <div class="order-info-item"> {{ record.workTypeName || '-' }}</div>
          <a-link v-if="record.workCode" class="order-info-item a-link" @click="() => toWorkDetail(record)">
            {{ record.workCode }}
          </a-link>
        </div>

        <div class="td-divider" v-if="record.workCode && record.orderCode"></div>

        <div v-if="record.orderCode">
          <div class="order-info-item"> {{ record.orderTypeName || '-' }}</div>
          <a-link v-if="record.orderCode" class="order-info-item a-link" @click="() => toOrderDetail(record)">
            {{ record.orderCode }}
          </a-link>
        </div>
      </template>
      <template #amount="{ record }">
        <span v-if="record.amount">
          {{ record.amount }}
          <a-tag :color="record.feeStatus == 0 ? 'orangered' : 'green'" size="small"> {{ record.feeStatusName }} </a-tag>
        </span>
        <template v-else> - </template>
      </template>
    </table-index>
  </div>
</template>

<script setup lang="ts">
  import { getExpenseFeeList, exportExpenseFeeList } from '@/api/dashboard/vehicleAccounting'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { computed, inject, onMounted, reactive, ref } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import { navigate2permission, navigate2orderDetail } from '../../../utils'
  import { useExport } from '@/hooks/list'

  const { navigateTo } = useNavigate()

  const modalData = ref<any>({})
  const modalStatus = inject<any>('modalStatus')
  const closeModal = inject<any>('closeModal')
  const filterShow = ref(false)
  const parentQueryParam = computed(() => modalStatus.queryParams)

  const queryParams = reactive<any>({
    carId: parentQueryParam.value.carId,
    licenseNoLike: parentQueryParam.value.licenseNo,
    orgIdList: parentQueryParam.value.orgIdList,
    startTime: parentQueryParam.value.startTime,
    endTime: parentQueryParam.value.endTime,
    profitFlag: parentQueryParam.value.profitFlag,
    feeCategory: parentQueryParam.value.feeCategory,
    isFilter: parentQueryParam.value.isFilter,
  })

  const searchList = [
    {
      label: '车牌号',
      prop: 'licenseNo',
      type: 'a-input',
    },
  ]
  const table = useTable({
    columns: [
      {
        title: '车牌号',
        dataIndex: 'licenseNo',
        fixed: 'left',
      },
      {
        title: '支出单号',
        dataIndex: 'businessCode',
        slotName: 'businessCode',
        width: 160,
      },
      {
        title: '关联单号类型',
        dataIndex: 'businessTypeName',
      },
      {
        title: '关联业务信息',
        dataIndex: 'orderInfo',
        slotName: 'orderInfo',
        width: 220,
      },
      {
        title: '费用产生门店',
        dataIndex: 'orgName',
      },
      {
        title: '费用发生时间',
        dataIndex: 'dueDate',
        width: 170,
      },
      {
        title: '支出费项',
        dataIndex: 'feeName',
      },
      {
        title: '费用金额',
        dataIndex: 'amount',
        slotName: 'amount',
        unit: '元',
      },
    ],
  })

  const loadData = useFetchTableDataApi(table, queryParams, getExpenseFeeList)

  onMounted(() => {
    loadData()
  })

  const onBusinessCodeLink = (record: any) => {
    console.log('支出单号', record)
    const { businessId, orderCode } = record
    navigate2permission('expenseFeeDetail', { id: businessId, tabName: orderCode }, navigateTo, closeModal)
  }

  // 跳转工单详情
  const toWorkDetail = (record: any) => {
    console.log('toWorkDetail record', record)
    const { workId, orderId, workCode, orderType } = record
    navigate2permission(
      'workOrderDetail',
      { id: workId, tab: 1, orderId: orderId, workCode: workCode, orderType, tabName: workCode },
      navigateTo,
      closeModal
    )
  }
  // 跳转业务单详情
  const toOrderDetail = (record: any) => {
    console.log('toOrderDetail record', record)
    const { orderId, orderCode, orderStatus, orderType, carId } = record

    navigate2orderDetail({ id: orderId, carId, orderCode, orderStatus, orderType }, navigateTo, closeModal)
  }

  const handleFilter = () => {
    filterShow.value = true
    queryParams.carId = null
    loadData()
  }

  const handleSubmit = () => {
    queryParams.licenseNoLike = queryParams.licenseNo
    loadData()
  }

  const handleExport = () => {
    useExport(exportExpenseFeeList, queryParams)
  }
</script>
<style lang="less" scoped>
  .icon-tip {
    font-size: 16px;
    color: #165dffff;
    vertical-align: -3px;
  }
</style>
